<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一号店</title>
<link href="/static/css/order_main.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]> 
<link href="/static/css/order_main.ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]> 
<link href="/static/css/order_main.ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="/static/css/style_cart.css">
<link rel="stylesheet" type="text/css" href="/static/css/css.css"/>
<script type="text/javascript" src="/static/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-imgslideshow.js"></script>
<script type="text/javascript" src="/static/js/ks-switch.js"></script>
<script type="text/javascript" src="/static/js/lib.js"></script>
<script type="text/javascript">
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

$(document).ready(function(){
   	$('.cat_item').mousemove(function(){
		$(this).addClass('cat_item_on');
	});
	$('.cat_item').mouseleave(function(){	
		$(this).removeClass('cat_item_on');
	});
	$('#slideshow').imgSlideShow({itemclass: 'i'})
	$("#slide-qg").switchTab({titCell: "dt a", trigger: "mouseover", delayTime: 0});
	$("#s_cart_nums1").hover(function(){
		mcancelclosetime();
		if(ddmenuitem) ddmenuitem.hide();
		ddmenuitem = $(document).find("#s_cartbox");
		ddmenuitem.fadeIn();
	},function(){
		mclosetime();
	});
	$("#s_cart_nums2").hover(function(){
		mcancelclosetime();
		if(ddmenuitem) ddmenuitem.hide();
		ddmenuitem = $(document).find("#s_cartbox");
		ddmenuitem.fadeIn();
	},function(){
		mclosetime();
	});
	$("#s_cartbox").hover(function(){
		mcancelclosetime();
	},function(){
		mclosetime();
	});
	 var $cur = 1;
    var $i = 4;
    var $len = $('.hot_list>ul>li').length;
    var $pages = Math.ceil($len / $i);
    var $w = $('.hotp').width()-66;
	
    var $showbox = $('.hot_list');
    
    var $pre = $('div.left_icon');
    var $next = $('div.rgt_icon');
 	
    $pre.click(function(){
        if (!$showbox.is(':animated')) { 
            if ($cur == 1) {   
                $showbox.animate({
                    left: '-=' + $w * ($pages - 1)
                }, 500); 
                $cur = $pages; 
            }
            else { 
                $showbox.animate({
                    left: '+=' + $w
                }, 500); 
                $cur--;
            }
           
        }
    });

    $next.click(function(){
        if (!$showbox.is(':animated')) { 
            if ($cur == $pages) {  
                $showbox.animate({
                    left: 0
                }, 500); 
                $cur = 1; 
            }
            else {
                $showbox.animate({
                    left: '-=' + $w
                }, 500);
                $cur++; 
            }
            
        }
    });
    
});
function mclose()
{
	if(ddmenuitem) ddmenuitem.hide();
}
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}
</script>
    <style type="text/css">
        #order_submit {
            background-color: red;
            color: white;
        }
    </style>
</head>

<body>
<div id="doc">
	<div id="s_hdw">
	
		<div id="s_tbar">
			<div class="s_hd">
				<div class="tbar_lft">您好，欢迎来到juju美食网站！<a href="#">用戶: {{ username }}</a> <a href="#"></a></div>
				<div class="tbar_rgt">
					<ul>
						<li class="first"><a href="{{ url('users:my_order',args=(1,)) }}">我的订单</a></li>
                        <li><a href="{{ url('index:index') }}">返回首页</a></li>
						<li class="s_tel_str">服务热线：</li>
						<li class="s_tel">1008611 嘻嘻 </li>
					</ul>
				</div>
			</div>
		</div><!--s_tbar end-->
		
{#		<div class="s_hd nav">#}
{#			<div id="s_logo"><a href="#"><img src="images/logo.jpg" border="0" /></a></div>#}
{#			<div id="s_nav">#}
{#				<ul>#}
{#					<li class="first cur"><a href="#">首页</a><span></span></li>#}
{#					<li><a href="#">积分兑换</a><span></span></li>#}
{#					<li><a href="#">抢购</a><span></span></li>#}
{#					<li class="last"><a href="#">礼品</a><span></span></li>#}
{#				</ul>#}
{#			</div>#}
{#		</div><!--s_hd end-->#}

	
	</div><!--s_hdw end-->
	
	<link type="text/css" href="/static/css/order_info.css" rel="stylesheet" />
	
	<div id="s_bdw">
		<div id="s_bd">
			
			<div class="stepflow"><img src="images/cartinforstep.gif" width="980" height="32" alt="" /></div>
			
			<div class="infotable">
				<table width="100%">
					<div class="Caddress">
                         <div class="open_new">
                        <a href="{{ url('address:address') }}" class="open_btn">使用新地址</a>
                        </div>
                        {% for address in addresses %}
                            <div class="add_mi">
                                <input type="radio" name="kk" id="add_ress" value="{{ address.id }}"/>
                                <p style="border-bottom:1px dashed #ccc;line-height:28px;" class="checkbox">昵称:{{ address.receiver }}</p>
                                <p>收货地址:{{ address.place }}</p>
                                <p>手机号码:{{ address.phone }}</p>
                            </div>
                        {% endfor %}
                    </div>
				</table>
			</div><!--infotable end-->
			
			<script type="text/javascript">
			$(function(){
				$(".focutext00").focusText();
				$(".focutext01").focusText();
				$(".focutext02").focusText();
				$(".focutext03").focusText();
			});
			</script>
			
			<div class="infotable">
				<table width="100%">
					<tr>
						<td class="tit">配送方式</td>
						<td class="summary">
							<table class="address" width="100%">
								<tr bgcolor="fff7eb">
									<td valign="top" width="10px"></td>
									<td valign="top" width="40px"><input type="radio" name="" id="yxkd" value="" /></td>
									<td valign="top" width="120px"><label for="yxkd">美团小哥</label></td>
									<td valign="top" width="80px" class="red">免费</td>
									<td valign="top">支持<span class="red">货到付款,美团小哥优质服务,包您满意<br />注：<span>仅支持同省区域距本店20公里内配送服务</span></td>
								</tr>
								<tr><td height="20px"></td></tr>
								<tr>
									<td valign="top" width="10px"></td>
{#									<td colspan="4"><input type="checkbox" name="" value="" id="" /> 收货时若网快递无法联系上我，我同意由朋友、同事或家人代收</td>#}
								</tr>
								<tr><td height="20px"></td></tr>
								<tr>
									<td valign="top" width="10px"></td>
{#									<td colspan="4"><input type="button" value="确认配送方式" id="" name="" class="btntext" /></td>#}
								</tr>
								<tr><td height="40px"></td></tr>
							</table>
						</td>
					</tr>
				</table>
			</div><!--infotable end-->
			
			<div class="infotable">
				<table width="100%">
					<tr>
						<td class="tit">支付方式</td>
						<td class="summary">
							<table class="address" width="100%">
								<tr>
									<td valign="top" width="10px"></td>
									<td valign="top" width="40px"><input type="radio" name="zf" id="df" value="1" /></td>
									<td valign="top" width="110px"><label for="df">货到付款</label></td>
									<td valign="top"><span class="red">支持现金和扫码</span></td>
								</tr>
								<tr><td height="10px"></td></tr>
								<tr><td height="10px"></td></tr>
								<tr>
									<td valign="top" width="10px"></td>
									<td valign="top" width="40px"><input type="radio" name="zf" id="opay" value="2" /></td>
									<td valign="top"><label for="opay">在线支付</label></td>
									<td valign="top">
										通过网上银行或支付平台在线付款
										<table>

											<tr>
												<td><label for="bank14"><img src="/static/images/bank14.gif" width="96" height="32" alt="" /></label></td>
											</tr>
										</table>
									</td>
								</tr>
								<tr><td height="20px"></td></tr>
								<tr>
									<td valign="top" width="10px"></td>
{#									<td colspan="4"><input type="button" value="确认支付方式" id="" name="" class="btntext" /></td>#}
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div><!--infotable end-->

			
			<div class="catinfotable">
				<table width="100%">
					<tr>
						<td class="tit">结算清单<br /></td>
						<td class="summary">
							<table class="catlist" width="100%">
								<tr bgcolor="#f3f3f3">
									<th>食物名称</th><th>食物价格</th><th>购买数量</th>
								</tr>
                                {% for a in foods %}
								<tr>
									<td><a href="#" >{{ a.name }}</a><br />商品编号：{{ a.id }}</td>
									<td class="red">￥{{ a.amount }}</td><td>{{ a.count }}</td>
								</tr>
                                {% endfor %}
							</table>
						</td>
					</tr>
				</table>		
			</div><!--catinfotable end-->
			
			<div class="catinfotable">
				<table width="100%">
					<tr>
{#						<td class="tit">订单结算</td>#}
						<td class="summary">

							<div class="f-r" style="width:170px;padding:0 15px;background:#f3f3f3;">
								<table class="totable" width="100%">
                                    <tr>
										<td>总数量:</td><td align="right"><strong style="font-size:18px;color:#dc0000;">{{ total_count }}</strong></td>
									</tr>
									<tr>
										<td>合计：</td><td align="right"><strong style="font-size:18px;color:#dc0000;" class="money">￥{{ total_amount }}</strong></td>
									</tr>
									<tr>
										<td align="right" colspan="2"><a href="javascript:;" type="submit" name="" id="order_submit" class="btnimg">提交订单</a></td>
									</tr>
									<tr><td height="10px"></td></tr>
								</table>
							</div>
						</td>
					</tr>
				</table>		
			</div><!--catinfotable end-->
			
		</div><!--s_bd end-->
	</div><!--s_bdw end-->	
	
	<div id="s_ftw">
	
		<div class="ft_quicklinks">
			<div class="ftql cf">
				<ul>
					<li class="ftql_s">
						<h3>购物指南</h3>
						<ul>
							<li><a href="">怎样购物</a></li>
							<li><a href="">会员制</a></li>
							<li><a href="">积分制度</a></li>
							<li><a href="">优惠券介绍</a></li>
							<li><a href="">订单状态说明</a></li>
						</ul>
					</li>
					<li class="ftql_s">
						<h3>服务条款</h3>
						<ul>
							<li><a href="">售后条款</a></li>
							<li><a href="">退换货说明</a></li>
							<li><a href="">联系客服</a></li>
						</ul>
					</li>
					<li class="ftql_s">
						<h3>配送方式</h3>
						<ul>
							<li><a href="">上门自提</a></li>
							<li><a href="">快递运输</a></li>
							<li><a href="">特快专递（EMS）</a></li>
							<li><a href="">如何送礼</a></li>
						</ul>
					</li>
					<li class="ftql_s">
						<h3>支付帮助</h3>
						<ul>
							<li><a href="">货到付款</a></li>
							<li><a href="">在线支付</a></li>
							<li><a href="">邮政汇款</a></li>
							<li><a href="">银行转账</a></li>
							<li><a href="">发票说明</a></li>
						</ul>
					</li>
					<li class="ftql_s">
						<h3>关于一号店</h3>
						<ul>
							<li><a href="">一号店介绍</a></li>
							<li><a href="">团队</a></li>
							<li><a href="">媒体报道</a></li>
							<li><a href="">招纳贤士</a></li>
							<li><a href="">公告</a></li>
						</ul>
					</li>
					<li class="ftql_s">
						<div class="ftql_d">
							<div class="str">客服中心信箱：</div>
							<div class="val"><a href="mailto:service@shunkelong.com">service@xxxxx.com</a></div>
						</div>
						<div class="ftql_d">
							<div class="str">客服中心热线：</div>
							<div class="val stel">4008-623-324</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	
		<div id="s_ft">
			<div class="ft_suggest pt100">请帮助我们提高！<a href="#">商城首页意见反馈</a></div>

		</div>
		
	</div><!--s_ftw end-->

</div>

<script type="text/javascript">
    var address_id = 0
    $('.add_mi input').click(function () {
        console.log($(this).val())
        address_id=$(this).val()
    })
    var pay_method = 0
    $('input[name="zf"]').click(function () {
        console.log($(this).val())
        pay_method=$(this).val()
    })

    var pay_amount = $('.money').text().slice(1)
    console.log(pay_amount)
    $('#order_submit').click(function () {

        {#alert(555555555);#}
        var param={'address_id':address_id,'pay_method':pay_method};
        $.ajax({
            url:'/orders/commit/',
            type: "post",
            dataType: 'json',
            contentType: "application/json",
            cache: false,
            data: JSON.stringify(param),
            success: function (res) {
                if (res.code == "0") {
                    //刷新当前界面
                    location.href = "/orders/success/?order_id=" + res.order_id
                    alert('提交成功');

                } else {
                    alert(res.message)
                    return false;
                }
            },
            error: function (e) {
                alert('提交失败')
                return false;

            }
        })

    })
</script>
</body>
</html>
